<template>
    <div>
        <van-cell-group>
            <van-field v-model="birthdayText" label="生日" readonly @click.native="timeShow = true" placeholder="请选择出生年月日" input-align="right" />
        </van-cell-group>

       <van-button type="primary" style="display: block; margin: 30px auto; width: 90%;" @click="submit">确认修改</van-button>

        <van-popup v-model='timeShow' position="bottom">
            <van-datetime-picker
                v-model="currentDate"
                type="date"
                show-toolbar	
                :min-date="minDate"
                :max-date="maxDate"
                @cancel="timeShow = false"
                @confirm="timeChange"
            />
        </van-popup>
    </div>
</template>

<script>
export default {
    name: 'editInfo',
    data() {
        return {
            minDate: new Date(1949, 0, 1),
            maxDate: new Date(),

            timeShow: false,

            currentDate: new Date(),

            birthday: '', //生日
            birthdayText: '',
        }
    },

    methods: {

        timeChange(data) {
            this.timeShow = false;
            let time = new Date(data);
            let n = v => v < 10 ? `0${v}` : v;
            let t = `${time.getFullYear()}-${n(time.getMonth() + 1)}-${n(time.getDate())}`
            this.birthday = t;
            this.birthdayText = t;
        },

       

        submit() {
            let params = {
                birthday: this.birthday, //生日
            };

            if (params.birthday === '') {
                this.$toast('请选择生日');
                return;
            }
            this.$http.post('/user/user/front/modifyUser', params).then(res => {
                if (res.status === 0) {
                    this.$store.dispatch('getUserInfo', this.$store.state.userInfo.token).then(() => {
                        this.$toast.success('修改成功');
                        setTimeout(() => {
                            this.$router.back();
                        }, 700)
                    })
                } else {
                    this.$toast.fail(res.messasge);
                }
            })
        }
    },

    created() {
        if (this.$route.query.birthday) {
            let birthday = this.$route.query.birthday;
            let time = new Date(birthday.replace(/-/g, '/'));
            let n = v => v < 10 ? `0${v}` : v;
            let t = `${time.getFullYear()}-${n(time.getMonth() + 1)}-${n(time.getDate())}`
            this.birthday = t;
            this.birthdayText = t;
            this.currentDate = time;
        }
    }
}
</script>

<style lang="scss">
.avatar {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    img {
        height: 40px;
        width: 40px;
        border-radius: 50%;
    }
}
</style>
